<!doctype html>
<script src="jquery-1.7.2.js"></script>
<script>

	$(function(){
	
		$('.big').bind('click',function(){
			//i++
			
			$('.big>div:first').animate({
					
						left:0,
						width:"100%",
						opacity:0},800,function(){
							$('.big>div:first').removeAttr('style').appendTo($('.big'))
						})
						
						
						//console.log($('.big>div:first'))
						//console.log($('.big>div:last'))
			//
				

		})
		
	});
</script>
<style>
	.big{
		width:700px;
		height:456px;
		border:1px solid #999999;
		margin:20px auto;
		position:relative;
	}
	p{
		font-size:25px;
		margin-left:370px;
		font-weight:800;
		color:gray;
	}
	.big div{
		position:absolute;
		border:2px solid #52697E;
	}
	.big>div img{
		width:100%;
	}
	.big>div:nth-child(1){
		left:198px;top:158px;
		z-index:6;
		width:300px;
		height:180px;
	}
	
	.big>div:nth-child(2){
		width:210px;
		height:126px;
		left:243px;top:133px;
		z-index:5;
		opacity:0.7;
	}
	
	.big>div:nth-child(3){
		width:171px;
		height:103px;
		left:263px;top:112px;
		z-index:4;
		opacity:0.6;
	}
	.big>div:nth-child(4){
		width:140px;
		height:84px;
		left:278px;top:100px;
		z-index:3;
		opacity:0.5;
	}
	.big>div:nth-child(5){
		width:111px;
		height:67px;
		left:293px;top:90px;
		z-index:2;
		opacity:0.4;
	}
	.big>div:nth-child(6){
		width:85px;
		height:49px;
		left:306px;top:82px;
		z-index:1;
		opacity:0.3;
	}

	.hid{
		width:85px;
		height:49px;
		left:306px;top:82px;
		z-index:1;
		opacity:0.3;
	}
	.img_1{
	}
	


</style>
<p>SPACEGALLERY</p>
<div class="big">
	<div class="one"><img src="images/bw1.jpg"></div>
	<div class="two"><img src="images/bw2.jpg"></div>
	<div class="three"><img src="images/bw3.jpg"></div>
	<div class="four"><img src="images/lights1.jpg"></div>
	<div class="five"><img src="images/lights2.jpg"></div>
	<div class="six"><img src="images/lights3.jpg"></div>
	
</div>
